<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<style>
    .yanglaoban {
        font-size: 30px;
        color: red
    }
</style>

<body>
    <div id="box"></div>
    <div id="box1"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 提供了操作DOM的react扩展库 -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 解析jsx语法的代码转换为js语法 -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <script type="text/babel">
        /* 表单收集数据
        受控组件 表单数据能自动收集状态维护自己的state中的值，输入时进行更新，状态的变化通过setState进行更改
        非受控组件 手动获取输入框中的数据
         */
        class Component1 extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    psw:'123'
                }
                this.handleSubmit = this.handleSubmit.bind(this);
                this.handlePsw = this.handlePsw.bind(this);
            }
            handleSubmit(e){
                // 表单的默认提交行为 this指向问题
                e.preventDefault();
                
                /* 收集数据 */
                let name= this.nameInput.value;
                let {psw} = this.state;
                alert(`用户名：${name},密码：${psw}`);
            }
            handlePsw(e){
                //更改state中的psw的值
                console.log('xx');

                const pswChange = e.target.value;
                this.setState({
                    psw:pswChange
                })
            }
            render() {
                return (
                    <div>
                        <h1>表单收集数据</h1>
                       <form action="http://baidu.com" onSubmit={this.handleSubmit}>
                            用户名：<input type="text" ref={input=>this.nameInput=input}/>
                            密码：<input type="text" value={this.state.psw} onChange={this.handlePsw}/>
                            <input type="submit" value="提交数据"/>
                       </form>
                    </div>
                );
            }
    }


    ReactDOM.render(<Component1/>, document.getElementById("box"));


   
</script>
</body>

</html>